<template>
  <div class="refine_intendance apply_box">
    <h2 class="titleblue">作业计划申请审批</h2>
    <div class="contant">
      <el-row :gutter="20">
        <el-col :sm="12" :md="12" :lg="8" class="search-item">
          <label class="search-label">IMO编号: </label>
          <el-input class="search-content" v-model="chooption.imo" placeholder="请输入IMO编号"></el-input>
        </el-col>
        <el-col :sm="12" :md="12" :lg="8" class="search-item" v-if="searchDialog">
          <label class="search-label">报送单位: </label>
          <el-select class="search-content" clearable v-model="chooption.applyUnit" placeholder="请选择报送单位">
            <el-option v-for="(item, index) in planData.reportedUnit" :key="index" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-col>
        <el-col :sm="12" :md="12" :lg="8" class="search-item">
          <label class="search-label">中文船名: </label>
          <el-input class="search-content" v-model="chooption.shipName" placeholder="请输入中文船名"></el-input>
        </el-col>
        <el-col :sm="12" :md="12" :lg="8" class="search-item">
          <label class="search-label">英文船名: </label>
          <el-input class="search-content" v-model="chooption.shipNameEn" placeholder="请输入英文船名"></el-input>
        </el-col>
        <el-col :sm="12" :md="12" :lg="8" class="search-item">
          <label class="search-label">申报状态: </label>
          <el-select class="search-content" clearable v-model="chooption.applyStatus" placeholder="请选择报申报状态">
            <el-option label="待审" :value="1"></el-option>
            <el-option label="审核通过" :value="2"></el-option>
            <el-option label="审核不通过" :value="3"></el-option>
            <el-option label="未提交" :value="4"></el-option>
            <el-option label="撤销" :value="5"></el-option>
          </el-select>
        </el-col>
        <el-col :span="24" class="search-item search-btn">
          <el-button type="primary" @click="search(0)">查询</el-button>
        </el-col>
      </el-row>

      <!--数据列表-->
      <el-row :gutter="20" style="margin: 0;">
        <el-table :data="tableData" style="width: 100%" border @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
          <el-table-column fixed type="selection" align="center" width="35"></el-table-column>
          <el-table-column fixed label="提醒" align="center" width="50">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" placement="right">
                <div slot="content">{{scope.row.msg}}</div>
                <i class="el-icon-warning" style="font-size:16px;color:red;" v-if="scope.row.msg.length > 3"/>
                <i class="el-icon-circle-check" style="font-size:16px;color:#cccccc;" v-else/>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed label="通过" align="center" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.radio" label="1"></el-radio>
            </template>
          </el-table-column>
          <el-table-column fixed label="退回" align="center" width="50">
            <template slot-scope="scope">
              <el-radio v-model="scope.row.radio" label="2"></el-radio>
            </template>
          </el-table-column>
          <el-table-column fixed label="审批意见" align="center" width="240">
            <template slot-scope="scope">
              <el-input v-model="scope.row.input" size="small" placeholder="请输入意见"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="applyStatus" label="申报状态" align="center" width="100">
            <template slot-scope="scope">
              <span v-if="scope.row.applyStatus == 1">待审</span>
              <span v-if="scope.row.applyStatus == 2">审核通过</span>
              <span v-if="scope.row.applyStatus == 3">审核不通过</span>
              <span v-if="scope.row.applyStatus == 4">未提交</span>
              <span v-if="scope.row.applyStatus == 5">撤销</span>
            </template>
          </el-table-column>

          <el-table-column :key="col.prop" align="center" v-for="col in relArray" :prop="col.prop" :label="col.label">
            <template slot-scope="scope">
              <span>{{getColLabel(scope.row, col.prop)}}</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" align="center" width="130">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.applyStatus != 2 && scope.row.applyStatus != 3" size="small"
                         @click="manipulate({action: 'detail', data: scope.row})">单船审批
              </el-button>
              <el-button type="text" v-else size="small" @click="manipulate({action: 'edit', data: scope.row})">修改
              </el-button>
              <el-button type="text" size="small" @click="manipulate({action: 'del', data: scope.row})">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <el-button type="primary" @click="batchApply" style="margin-top: 20px;">批量审批</el-button>
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       :current-page.sync="currentPage"
                       layout="total,prev, pager, next, jumper" :total="totalNum" background>
        </el-pagination>
      </div>
    </div>

    <!-- 弹层 -->
    <el-dialog :visible.sync="detailDialog" :before-close="toClose" width="80%" class="plan-dialog">
      <!--      <plan-detail @close="close" :rowData="rowData"></plan-detail>-->
      <div>
        <h2 class="titleblue">作业计划审批</h2>
        <div class="detail-content">
          <el-form ref="form" :model="form" label-width="110px">
            <div class="item-container">
              <el-form-item label="中文船名" class="row-item">
                <el-input v-model="form.shipName" class="form-item-width" :disabled="itemDisable"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="英文船名">
                <el-input v-model="form.shipNameEn" class="form-item-width" :disabled="itemDisable"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="IMO编号">
                <el-input v-model="form.imo" class="form-item-width" :disabled="itemDisable"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="船舶登记号">
                <el-input v-model="form.shipNo" class="form-item-width" :disabled="itemDisable"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="载重吨">
                <el-input v-model="form.capacity" class="form-item-width" :disabled="itemDisable"></el-input>
              </el-form-item>
              <el-form-item class="row-item" label="进出港标志">
                <el-select v-model="form.inOutType" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
                  <el-option v-for="(item, index) in planData.portType" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="港区名称">
                <el-select v-model="form.portName" :disabled="itemDisable" placeholder="请选择" class="form-item-width" @change="onPortChange">
                  <el-option v-for="(item, index) in planData.district" :key="index" :label="item"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="代理公司">
                <el-input v-model="form.agency" :disabled="itemDisable" class="form-item-width"></el-input>
              </el-form-item>
              <el-form-item class="row-item" label="船长(米)">
                <el-input v-model="form.shipLength" :disabled="itemDisable" class="form-item-width"></el-input>
              </el-form-item>
              <el-form-item class="row-item" label="前吃水">
                <el-input v-model="form.loadBefore" :disabled="itemDisable" class="form-item-width"
                          @input="form.loadBefore = form.loadBefore.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>
              <el-form-item class="row-item" label="后吃水">
                <el-input v-model="form.loadAfter" :disabled="itemDisable" class="form-item-width"
                          @input="form.loadAfter = form.loadAfter.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="货物名称">
                <el-input v-model="form.goodsName1" :disabled="itemDisable" class="form-item-width"></el-input>
              </el-form-item>
              <!--          <el-form-item class="row-item" label="货物名称2">-->
              <!--            <el-input v-model="form.goodsName2" :disabled="itemDisable" class="form-item-width"></el-input>-->
              <!--          </el-form-item>-->
              <el-form-item class="row-item" label="货物数量">
                <el-input v-model="form.goodsCount" :disabled="itemDisable" class="form-item-width"
                          @input="form.goodsCount = form.goodsCount.replace(/[^\d]/g,'')"></el-input>
              </el-form-item>

              <el-form-item class="row-item" label="是否危险品">
                <el-select v-model="form.dangerGoods" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
                  <el-option v-for="(item, index) in planData.dangerGoods" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item class="row-item" label="靠泊泊位">
                <el-select v-model="form.arriveBerth" :disabled="itemDisable" placeholder="请选择"
                           class="form-item-width" filterable>
                  <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="计划靠泊时间">
                <el-date-picker v-model="form.berthPlanTime" :disabled="itemDisable" placeholder="选择日期时间" type="datetime"
                                class="form-item-width"></el-date-picker>
              </el-form-item>

              <el-form-item class="row-item" label="移泊泊位">
                <el-select v-model="form.moveBerth" :disabled="itemDisable" placeholder="请选择" class="form-item-width" filterable>
                  <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="计划移泊时间">
                <el-date-picker v-model="form.moveEst" :disabled="itemDisable" placeholder="选择日期时间"
                                type="datetime" class="form-item-width"></el-date-picker>
              </el-form-item>

              <el-form-item class="row-item" label="离泊泊位">
                <el-select v-model="form.leaveBerth" :disabled="itemDisable" placeholder="请选择"
                           class="form-item-width" filterable>
                  <el-option v-for="(item, index) in berthArray" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="计划离泊时间">
                <el-date-picker v-model="form.leaveEst" :disabled="itemDisable" placeholder="选择日期时间"
                                type="datetime" class="form-item-width"></el-date-picker>
              </el-form-item>

              <el-form-item class="row-item" label="装/卸货">
                <el-select v-model="form.loadType" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
                  <el-option v-for="(item, index) in planData.loading" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item class="row-item" label="报给单位" :rules="[{ required: true, message: '请选择报给单位'}]">
                <el-select v-model="form.approvalUnit" :disabled="itemDisable" placeholder="请选择" class="form-item-width">
                  <el-option v-for="(item, index) in planData.reportedUnit" :key="index" :label="item.label"
                             :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="申报单位">
                <el-input v-model="form.applyUser.applyUnit" :disabled="itemDisable" class="form-item-width bgcolor-ccc"
                          disabled></el-input>
                <!--<el-select v-model="form.fullname" placeholder="请选择" class="form-item-width">
                  <el-option label="进" :value="1"></el-option>
                  <el-option label="出" :value="2"></el-option>
                </el-select>-->
              </el-form-item>
              <el-form-item class="row-item" label="申报人员">
                <el-input v-model="form.applyUser.applyUserName" :disabled="itemDisable" class="form-item-width bgcolor-ccc"
                          disabled></el-input>
                <!--<el-input v-model="form.fullname" class="form-item-width"></el-input>-->
              </el-form-item>
              <el-form-item class="row-item" label="国籍">
                <el-select v-model="form.country" :disabled="itemDisable" placeholder="请选择" class="form-item-width" filterable>
                  <el-option v-for="(item, index) in planData.countries" :key="index" :label="item.label"
                             :value="item.label"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="row-item" label="上一港">
                <el-input v-model="form.lastPort" :disabled="itemDisable" class="form-item-width"></el-input>
              </el-form-item>

              <el-form-item label="审批结果" :rules="[{ required: true, message: '请选择审批结果'}]" class="row-item">
                <el-select v-model="form.applyStatus" placeholder="请选择" class="form-item-width">
                  <el-option label="待审" :value="1"></el-option>
                  <el-option label="通过" :value="2"></el-option>
                  <el-option label="不通过" :value="3"></el-option>
                  <el-option label="未提交" :value="4"></el-option>
                  <el-option label="撤销" :value="5"></el-option>
                </el-select>
              </el-form-item>

              <div class="row-item"></div>

              <el-form-item label="申报备注" style="width:100%;">
                <el-input type="textarea" :rows="4" v-model="form.remark" placeholder=""
                          class="height-300 form-text-width"></el-input>
              </el-form-item>

              <el-form-item label="审批备注" style="width:100%;">
                <el-input type="textarea" :rows="4" v-model="form.approvalRemark" placeholder=""
                          class="height-300 form-text-width"></el-input>
              </el-form-item>

              <el-form-item label="审批意见" style="width:100%;">
                <el-input type="textarea" :rows="4" v-model="form.approvalOpinion" placeholder=""
                          class="height-300 form-text-width"></el-input>
              </el-form-item>

            </div>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="toClose">取 消</el-button>
          <el-button type="primary" @click="submit">审 批</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import workPLanService from '@/services/WorkPLanService'
  import planData from '../component/PlanData.js'

  export default {
    name: 'PlanApproval',
    components: {
    },
    data: function () {
      return {
        form: {
          dangerGoods: '',
          shipNo: '',
          imo: '',
          inOutType: '',
          portName: '',
          agency: '',
          shipLength: '',
          loadBefore: '',
          loadAfter: '',
          berth: '',
          loadType: '',
          goodsName1: '',
          goodsName2: '',
          goodsCount: '',
          berthPlanTime: '',
          planTime: '',
          currentBerth: '',
          trend: '',
          planBerth: '',
          approvalUnit: '',
          remark: '',
          country: '',//国家
          leaveEst: '',//计划离泊时间
          moveBerth: '',//移泊泊位（代码）
          moveEst: '',//计划移泊时间
          arriveBerth: '',//靠泊泊位
          leaveBerth: '',//离泊泊位
          lastPort: '',//上一港,
          capacity: '',
          shipName: '',
          shipNameEn: '',
          createTime: '',
          applyUnit: '',
          applyStatus: '',
          applyUser: {
            applyUnit: '',
            applyUser: '',
            applyUserName: '',
            createTime: null,
            id: null,
            password: '',
            updateTime: null
          },
          approvalRemark: '',
          approvalOpinion: ''
        },
        goodsNameData: [
          {value: '0100', label: '煤炭及制品'},
          {value: '0200', label: '石油、天然气及制品'},
          {value: '0201', label: '其中：原油'},
          {value: '0300', label: '金属矿石'},
          {value: '0400', label: '钢铁'},
          {value: '0500', label: '矿物性建筑材料'},
          {value: '0600', label: '水泥'},
          {value: '0700', label: '木材'},
          {value: '0800', label: '非金属矿石'},
          {value: '0801', label: '其中：磷矿'},
          {value: '0900', label: '化学肥料及农药'},
          {value: '1000', label: '盐'},
          {value: '1100', label: '粮食'},
          {value: '1200', label: '机械、设备、电器'},
          {value: '1300', label: '化工原料及制品'},
          {value: '1400', label: '有色金属'},
          {value: '1500', label: '轻工、医药产品'},
          {value: '1501', label: '其中：日用工业品'},
          {value: '1600', label: '农林牧渔业产品'},
          {value: '1601', label: '其中：棉花'},
          {value: '1700', label: '其他'},
          {value: '1800', label: '集装箱运量(TEU)'},
          {value: '1900', label: '集装箱货运量'},
          {value: '2000', label: '滚装车辆数'},
          {value: '2100', label: '滚装车辆货运量'}
        ],
        rowData: {},
        detailDialog: false, // 计划详情页面显示
        totalNum: 1,
        currentPage: 0,
        tableData: [],
        planData: planData,
        selectData: [],
        chooption: {
          imo: '',
          shipName: '',
          shipNameEn: '',
          applyStatus: 1,
          applyUnit: ''
        },
        berthArray: [],
        itemDisable: false,
        organization: [],
        searchDialog: false,
        eidtDiable: false,
        relArray: [
          {prop: 'shipName', label: '船舶名称'},
          {prop: 'shipNameEn', label: '英文船名'},
          {prop: 'country', label: '国籍'},
          {prop: 'shipNo', label: '船舶登记号'},
          {prop: 'imo', label: 'imo编号'},
          {prop: 'capacity', label: '载重吨'},
          {prop: 'portName', label: '港区名称'},
          {prop: 'agency', label: '代理公司'},
          {prop: 'shipLength', label: '船长(米)'},
          {prop: 'loadBefore', label: '前吃水'},
          {prop: 'loadAfter', label: '后吃水'},
          {prop: 'loadType', label: '装/卸货'},
          {prop: 'goodsName1', label: '货物名称'},
          {prop: 'goodsCount', label: '货物数量'},
          {prop: 'dangerGoods', label: '危险品'},
          {prop: 'lastPort', label: '上一港'},
          {prop: 'arriveBerth', label: '靠泊泊位'},
          {prop: 'berthPlanTime', label: '计划靠泊时间'},
          {prop: 'moveBerth', label: '移泊泊位'},
          {prop: 'moveEst', label: '计划移泊时间'},
          {prop: 'leaveBerth', label: '离泊泊位'},
          {prop: 'leaveEst', label: '计划离泊时间'},
          {prop: 'inOutType', label: '进出港标志'},
          {prop: 'approvalUnit', label: '报给单位'},
          {prop: 'remark', label: '备注'},
          {prop: 'createTime', label: '申报时间'}
        ]
      }
    },
    created() {
      // console.log(this.planData)
      if (this.$profile.organiza.level < 2) {
        if (this.$profile.organiza.name.indexOf('海事处') != -1) {
          this.searchDialog = false
          let obj = this.planData.reportedUnit.find(item => item.label == this.$profile.organiza.name)
          this.chooption.applyUnit = obj.value
        } else {
          this.searchDialog = true
        }
      }
      this.search(0)
    },
    methods: {
      onPortChange(portName, clearBerth = true) {

        if (portName != null && clearBerth) {
          this.form.arriveBerth = ''
          this.form.leaveBerth = ''
          this.form.moveBerth = ''
        }
        this.berthArray = planData.berth.filter(p => {
          return p.district === portName
        })
      },
      tableRowClassName({row, rowIndex}) {
        // console.log('row is:::', row)
        if (row.msg.length > 3) {
          console.log('row index:', rowIndex, 'warning row.')
          return 'warning-row'
        }
        return ''
      },
      needShowWarning(row) {
        let shipLength = row.shipLength || 0
        let msg
        let arriveBerth = this.planData.berth.find(item => item.value === row.arriveBerth)
        let moveBerth = this.planData.berth.find(item => item.value === row.moveBerth)
        let leaveBerth = this.planData.berth.find(item => item.value === row.leaveBerth)
        if (arriveBerth && arriveBerth.berthLength <= shipLength) {
          msg = `靠泊泊位(${arriveBerth.label}, ${arriveBerth.berthLength}米)长度小于船长(${shipLength})`
        }
        if (moveBerth && moveBerth.berthLength <= shipLength) {
          if (msg) msg += '\n'
          msg += `移泊泊位(${moveBerth.label}, ${moveBerth.berthLength}米)长度小于船长(${shipLength})`
        }
        if (leaveBerth && leaveBerth.berthLength <= shipLength) {
          if (msg) msg += '\n'
          msg += `离泊泊位(${leaveBerth.label}, ${leaveBerth.berthLength}米)长度小于船长(${shipLength})`
        }
        if (!msg) msg = '无异常'
        return msg
      },
      getColLabel(rowData, prop) {
        let val = rowData[prop]
        if (prop.indexOf('Berth') > -1) {
          return this.searchArea(val)
        } else if (prop === 'dangerGoods') {
          if (val === 0) {
            return '是'
          } else if (val === 1) {
            return '否'
          } else {
            return ''
          }
        // } else if (prop === 'country') {
        //   let c = planData.countries.find(p => p.label === val)
        //   return !!c ? c.label : val
        } else if (prop === 'loadType') {
          if (val === 0) {
            return '装'
          } else if (val === 1) {
            return '卸'
          } else {
            return ''
          }
        } else if (prop === 'berthPlanTime' || prop === 'moveEst' || prop === 'createTime' || prop === 'leaveEst') {
          if (val) {
            return this.$m(val).format('YYYY-MM-DD HH:mm:ss')
          } else {
            return ''
          }
        } else if (prop === 'inOutType') {
          if (val === 1) {
            return '进港'
          } else if (val === 2) {
            return '出港'
          } else {
            return ''
          }
        } else if (prop === 'approvalUnit') {
          let c = planData.reportedUnit.find(p => p.value === val)
          return !!c ? c.label : ''
        }
        return val
      },
      batchApply() {
        let flagNum = 0, flagRadio = 0
        let selectNum = this.selectData.length

        if (selectNum == 0) {
          this.$message({
            message: '请选择要修改的作业计划！',
            type: 'warning'
          })
          return false
        }


        for (let i = 0; i < selectNum; i++) {
          let item = this.selectData[i]
          if (item.radio) {
            flagRadio += 1
          }
        }
        if (flagRadio != selectNum) {
          this.$message({
            message: '请修改选中申请计划的状态！',
            type: 'warning'
          })
          return false
        }


        for (let i = 0; i < selectNum; i++) {
          let item = this.selectData[i]

          let form = item
          form.applyStatus = item.radio == 1 ? 2 : 3
          form.approvalOpinion = item.input ? item.input : ''
          workPLanService.editWorkPlans(form).then(res => {
            if (res.status == 200) {
              flagNum += 1
              if (flagNum == selectNum) {
                this.$message({
                  message: '批量审批成功！',
                  type: 'success'
                })
                this.search(0)
              }
            }
          }).catch(resp => {
            this.$message({
              message: '审批失败！',
              type: 'error'
            })
          })
        }
      },
      showDetail(data) {

        for (let key in data) {
          if (key === 'applyUser') {
            if (data[key]) {
              this.form.applyUser = data.applyUser
            } else {
              this.form.applyUser = {
                applyUnit: '',
                applyUser: '',
                applyUserName: '',
                createTime: null,
                id: null,
                password: '',
                updateTime: null
              }
            }
          } else if (key !== 'updateTime') {
            this.form[key] = data[key]
          }
        }

        if (this.form.portName) {
          this.onPortChange(this.form.portName, false)
        }
      },
      searchArea(data) {
        let obj = {}, berthData = planData.berth
        if (data) {
          obj = berthData.find(item => {
            return item.value == data
          })
        } else {
          obj = {
            label: ''
          }
        }
        return obj ? obj.label : ''
      },
      submit() {
        let obj = JSON.parse(JSON.stringify(this.form))

        // this.form.applyUser = null
        workPLanService.editWorkPlans(obj).then(res => {
          if (res.status == 200) {
            this.$message({
              message: '审批成功！',
              type: 'success'
            })
            this.search(0)
            this.toClose()
          }
        }).catch(resp => {
          this.$message({
            message: '审批失败！',
            type: 'error'
          })
          this.toClose()
        })
      },
      handleSelectionChange(val) {
        // this.multipleSelection = val;
        this.selectData = val
      },
      toClose() {
        this.ship = {
          shipName: '',
          shipNameEn: '',
          imo: '',
          typeNameCn: '',
          form7: ''
        }
        this.form = {
          dangerGoods: '',
          shipNo: '',
          imo: '',
          inOutType: '',
          portName: '',
          agency: '',
          shipLength: '',
          loadBefore: '',
          loadAfter: '',
          berth: '',
          loadType: '',
          goodsName1: '',
          goodsName2: '',
          goodsCount: '',
          berthPlanTime: '',
          planTime: '',
          currentBerth: '',
          trend: '',
          planBerth: '',
          approvalUnit: '',
          remark: '',
          country: '',//国家
          leaveEst: '',//计划离泊时间
          moveBerth: '',//移泊泊位（代码）
          moveEst: '',//计划移泊时间
          arriveBerth: '',//靠泊泊位
          leaveBerth: '',//离泊泊位
          lastPort: '',//上一港,
          capacity: '',
          shipName: '',
          shipNameEn: '',
          createTime: '',
          applyUnit: '',
          applyUser: {
            applyUnit: '',
            applyUser: '',
            applyUserName: '',
            createTime: null,
            id: null,
            password: '',
            updateTime: null
          },
          approvalRemark: '',
          approvalOpinion: ''
        }
        this.detailDialog = false
      },
      // 表格option操作函数
      manipulate(param) {
        if (param.action == 'detail') {
          this.detailDialog = true
          this.rowData = param.data
          this.showDetail(param.data)
        } else if (param.action == 'edit') {
          this.detailDialog = true
          this.rowData = param.data
          this.showDetail(param.data)
          this.eidtDiable = true
        } else if (param.action == 'del') {
          // this.detailDialog = true
          // this.rowData = param.data
          workPLanService.delWorkPlans(param.data.id).then(res => {
            if (res) {
              this.$message({
                message: '删除成功!',
                type: 'success'
              })
              this.search(0)
            }
          })
        }
      },
      // 弹层关闭函数
      close() {
        this.detailDialog = false
      },
      handleSizeChange(page) {
        this.search(page - 1)
      },
      handleCurrentChange(page) {
        this.search(page - 1)
      },
      // 查询参数拼接函数
      handlerQuery() {
        let str = ''
        if (this.chooption.imo) {
          str += 'imo=like=' + this.chooption.imo
        }
        if (this.chooption.shipName) {
          if (str) {
            str += '&'
          }
          str += 'shipName=like=' + this.chooption.shipName
        }
        if (this.chooption.applyUnit) {
          if (str) {
            str += '&'
          }
          str += 'approvalUnit==' + this.chooption.applyUnit
        }
        if (this.chooption.shipNameEn) {
          if (str) {
            str += '&'
          }
          str += 'shipNameEn=like=' + this.chooption.shipNameEn
        }
        if (this.chooption.applyStatus) {
          if (str) {
            str += '&'
          }
          str += 'applyStatus==' + this.chooption.applyStatus
        }
        return str + "&sort=createTime,desc"
      },
      // 查询函数
      search(num = 0) {
        if (num == 0) {
          this.$set(this, 'currentPage', 1)
        }
        let str = this.handlerQuery()
        // let str = ''
        workPLanService.searchList(str, num, 10).then(res => {
          res.data.forEach(row => {
            row.msg = this.needShowWarning(row)
          })
          this.tableData = res.data
          this.totalNum = parseInt(res.headers['x-total-count'], 10)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .refine_intendance {
    width: 100%;
  }

  .search-item {
    padding: 10px 0;

    label {
      color: #333 !important;
    }
  }

  .search-label {
    display: inline-block;
    width: 120px;
    text-align: right;
  }

  .search-content {
    max-width: calc(100% - 150px);
    margin-left: 20px;
    width: 100%;
  }

  .search-btn {
    text-align: center;
  }

  .detail-content {
    padding: 20px;
  }

  .dialog-footer {
    text-align: center;
    padding-bottom: 40px;
  }

  .form-item-width {
    width: 80%;
  }

  .form-text-width {
    width: 91%;
  }

  .bgcolor-ccc {
    background: #f9f9f9 !important;
  }

  .bgcolor-ccc > .el-input__inner {
    background: #f9f9f9 !important;
  }

  .item-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
  }

  .row-item {
    min-width: 45%;
    flex: 1;
  }
</style>

<style lang="scss">
  .warning-row {
    background-color: #fde2e2 !important;
  }

  .apply_box {
    .el-radio__label {
      display: none;
    }
  }
</style>
